<template>
  <div id="Recommendation">
    <div class="headline">
      <img src="/img/icon/icon_zhekou.svg" width="30" alt="图片丢失" />
      <h2>Category Recommendation</h2>
    </div>
    <div class="context" v-for="(context, i) of context_list" :key="i">
      <div class="hot">
        <a :href="context.hot.link"
          ><img :src="context.hot.img_url" alt="图片丢失"
        /></a>
      </div>
      <div class="items">
        <div class="item" v-for="(item, k) of context.other_list" :key="k">
          <a :href="item.link">
            <div class="item_img">
              <img :src="item.img_url" alt="图片丢失" />
            </div>
            <div>
              <p>{{ item.title }}</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recommendation",
  data() {
    return {
      context_list: [
        {
          hot: {
            img_url:
              "https://okmarts.com/jeecg-boot/sys/common/view/temp/banner/banner_compressor.jpg",
            link: "javascript:void(0)",
          },
          other_list: [
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Refrigeration_Compressors/Rechi/2022/44A341A/Rechi_44A341A_R410A.png",
              link: "javascript:void(0)",
              title: "Rechi Compressor 44A341A",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Refrigeration_Compressors/Sanyo/2022/C-2RN153H3A/Sanyo_C-2RN153H3A_R407c.png",
              link: "javascript:void(0)",
              title: "Sanyo Denki Compressor C-2RN153H3A",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Refrigeration_Compressors/Mitsubishi/2022/RE277NRAMT/Mitsubishi_RE277NRAMT_R140A.png",
              link: "javascript:void(0)",
              title: "Mitsubishi Compressor RE277NRAMT",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Refrigeration_Compressors/LG/2022/GKS141CMA/LG_GKS141CMA.png",
              link: "javascript:void(0)",
              title: "LG Compressor GKS141CMA",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Refrigeration_Compressors/Tecumseh/2022/RKA5512YXD/Tecumseh_RKA5512YXD.png",
              link: "javascript:void(0)",
              title: "Tecumseh Compressor RKA5512YXD",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Refrigeration_Compressors/Hitachi/2022/BSD122DT-P6AU/BSD122DT-P6AU.jpg",
              link: "javascript:void(0)",
              title: "Hitachi Compressor BSD122DT-P6AU",
            },
          ],
        },
        {
          hot: {
            img_url:
              "https://okmarts.com/jeecg-boot/sys/common/view/temp/banner/banner_fan.jpg",
            link: "javascript:void(0)",
          },
          other_list: [
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Fan/KUKA/2022/KA2206HA2-2/KAKU_KA2206HA2-2.png",
              link: "javascript:void(0)",
              title: "KAKU Fan KA2206HA2-2",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Fan/Sanyo/2022/9WV1212P1JD003/Sanyo%20Denki_9WV1212P1JD003.png",
              link: "javascript:void(0)",
              title: "Sanyo Denki Fan 9WV1212P1JD003",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Fan/Everflow/2022/T127010BU/EVERFLOW_T127010BU.png",
              link: "javascript:void(0)",
              title: "EVERFLOW Fan T127010BU",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Fan/SUNON/2022/EE92252BX-000C-G99/SUNON_EE92252BX-000C-G99.png",
              link: "javascript:void(0)",
              title: "SUNON Fan EE92252BX-000C-G99",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Fan/EBM/2022/4114N[2H4/Ebmpapst_4114N[2H4.png",
              link: "javascript:void(0)",
              title: "Ebmpapst Fan 4114N/2H4",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Fan/EBM/2022/612NGLE/EBM_612NGLE.png",
              link: "javascript:void(0)",
              title: "Ebmpapst Fan 612NGLE",
            },
          ],
        },
        {
          hot: {
            img_url:
              "https://okmarts.com/jeecg-boot/sys/common/view/temp/banner/%E6%8E%A8%E8%8D%90cylinder%E6%B0%94%E7%BC%B8.jpg",
            link: "javascript:void(0)",
          },
          other_list: [
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Air_Cylinder/Koganei/2022/CDA16X25-B/CDA16X25-B.png",
              link: "javascript:void(0)",
              title: "KOGANEI Air Cylinder CDA16X25-B",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Air_Cylinder/Mindman/2022/MCQA-11-50-25/Mindman_MCQA-11-50-25.png",
              link: "javascript:void(0)",
              title: "MINDMAN Air Cylinder MCQA-11-50-25",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Air_Cylinder/AirTAC/2022/RMT16X200S/AirTAC_RMT16X200S.png",
              link: "javascript:void(0)",
              title:
                "AirTAC Air Cylinder Pneumatic RMT16X200S Rodless magnetic Cylinder Pneumatic(With guide)",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Air_Cylinder/Mindman/2022/MCJA-12-20-25M/Mindman_MCJA-12-20-25M.png",
              link: "javascript:void(0)",
              title: "MINDMAN Air Cylinder MCJA-12-20-25M",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Air_Cylinder/JRT/2022/AF316-16/JRT_JRT%20AF316-16.png",
              link: "javascript:void(0)",
              title: "JRT Air Cylinder AF316-16",
            },
            {
              img_url:
                "https://okmarts.com/jeecg-boot/sys/common/view/temp/product/Air_Cylinder/CKD/2022/SCM-40D70/CKD_SCM-40D70.png",
              link: "javascript:void(0)",
              title: "CKD Air Cylinder SCM-40D70",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/less/color";
#Recommendation {
  width: 100%;
}
.headline {
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  h2 {
    margin-left: 5px;
    display: inline-block;
  }
}
/* -------- */
.context {
  width: 100%;
  height: 235px;
  display: flex;
  margin: 30px 0px;
}
.hot {
  width: 325px;
  height: 100%;
  overflow: hidden;
  border-radius: 5px 0 0 5px;
  img {
    width: 100%;
    height: 100%;
  }
}
.items {
  display: flex;
  width: calc(100% - 325px);
  height: 100%;
}
.item:last-of-type {
  border-right: none;
  border-radius: 0 5px 5px 0;
}
.item {
  box-sizing: border-box;
  width: 16.5%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid @border-color-base;
  //   border-bottom: 1px solid transparent;
  a {
    border-bottom: 1px solid transparent;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 100%;
    background: white;
  }
  div {
    width: 100%;
    overflow: hidden;
  }
  img {
    height: 175px;
  }
  p {
    height: 30px;
    font-size: 10px;
    color: black;
    transition: 0.4s;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
.item_img {
  height: 175px;
  display: flex;
  justify-content: center;
}
.item a:hover {
  border-bottom: 1px solid @color-primary;
  p {
    color: @color-primary;
  }
}
@media screen and (min-width: 760px) and (max-width: 1280px) {
  .hot {
    display: none;
  }
  .items {
    width: 100%;
  }
}
@media screen and (max-width: 760px) {
  .context {
    height: auto;
    flex-direction: column;
  }
  .hot {
    box-sizing: border-box;
    width: calc(100% - 16px);
    border-radius: 8px;
    margin: 8px;
    height: 235px;
  }
  .items {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }
  .item {
    border-right: none;
    width: 50%;
    padding: 8px;
    a {
      border-radius: 5px;
    }
  }
}
</style>